<template>
  <view class="my-list">
    <view class="my-list" v-if="refresherEnabled">
      <scroll-view
        class="scroll"
        scroll-y="true"
        @scrolltolower="loadmore"
        :refresher-triggered="pageInfo.triggered"
        :refresher-enabled="refresherEnabled"
        @refresherrefresh="reset"
      >
        <slot name="normal" />
        <template v-if="pageInfo.status === 'nodata'">
          <my-empty class="empty" :text="EmptyText" />
        </template>
        <view v-else>
          <slot />
          <view class="loading" v-if="pageInfo.status">
            <my-loadmore @reload="reload" :status="pageInfo.status" />
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="my-list" v-else>
      <template v-if="pageInfo.status === 'nodata'">
        <my-empty class="empty" :text="EmptyText" />
      </template>
      <scroll-view
        class="scroll"
        v-else
        scroll-y="true"
        @scrolltolower="loadmore"
        :refresher-triggered="triggered"
        :refresher-enabled="refresherEnabled"
        @refresherrefresh="reset"
      >
        <slot name="normal" />
        <slot />
        <view class="loading" v-if="pageInfo.status">
          <my-loadmore @reload="reload" :status="pageInfo.status" />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MyEmpty from '../MyEmpty/MyEmpty.vue'
import MyLoadmore from '../MyLoadmore/MyLoadmore.vue'

const props = defineProps({
  pageInfo: {
    default: () => {
      return {
        nodate: false,
        status: '', // '' nodata looading nomore error
        triggered: false
      }
    }
  },
  refresherEnabled: {
    default: false
  },
  EmptyText: {
    default: '暂无数据'
  }
})

const emit = defineEmits(['onReset', 'onLoadmore', 'onReload'])

const reset = () => {
  if (!props.pageInfo.triggered) {
    emit('onReset')
  }
}

const loadmore = () => {
  emit('onLoadmore')
}

const reload = () => {
  emit('onReload')
}
</script>

<style lang="scss" scoped>
.my-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.scroll {
  flex: 1 0 auto;
  width: 100%;
  height: 100%;
}

.empty {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20rpx 0;
}
</style>
